<script>
// 资料来源https://www.bbsmax.com/A/x9J2YlRjz6/
// 搬运代码引入解决ie兼容问题
import {
    addResizeListener,
    removeResizeListener
} from "./resizeEvent";

export default {
    props: {
        width: {
            type: String,
            default: "100%"
        }
    },

    data() {
        return {
            scrollable: false,
            navOffset: 0
        };
    },

    computed: {
        navStyle() {
            return {
                transform: `translateX(-${this.navOffset}px)`
            };
        }
    },

    methods: {
        scrollPrev() {
            const containerSize = this.$refs.navScroll.offsetWidth;
            const currentOffset = this.navOffset;

            if (!currentOffset) return;

            const newOffset =
                currentOffset > containerSize
                    ? currentOffset - containerSize
                    : 0;

            this.navOffset = newOffset;
        },
        scrollNext() {
            const navSize = this.$refs.nav.offsetWidth;
            const containerSize = this.$refs.navScroll.offsetWidth;
            const currentOffset = this.navOffset;

            if (navSize - currentOffset <= containerSize) return;

            const newOffset =
                navSize - currentOffset > containerSize * 2
                    ? currentOffset + containerSize
                    : navSize - containerSize;

            this.navOffset = newOffset;
        },
        scrollToActiveTab() {
            if (!this.scrollable) return;

            const nav = this.$refs.nav;
            const activeTab = this.$el.querySelector(".is-active");
            if (!activeTab) return;
            const navScroll = this.$refs.navScroll;
            const activeTabBounding = activeTab.getBoundingClientRect();
            const navScrollBounding = navScroll.getBoundingClientRect();
            const maxOffset = nav.offsetWidth - navScrollBounding.width;
            const currentOffset = this.navOffset;
            let newOffset = currentOffset;

            if (activeTabBounding.left < navScrollBounding.left) {
                newOffset =
                    currentOffset -
                    (navScrollBounding.left - activeTabBounding.left);
            }
            if (activeTabBounding.right > navScrollBounding.right) {
                newOffset =
                    currentOffset +
                    activeTabBounding.right -
                    navScrollBounding.right;
            }
            newOffset = Math.max(newOffset, 0);
            this.navOffset = Math.min(newOffset, maxOffset);
        },
        update() {
            if (!this.$refs.nav) return;
            const navSize = this.$refs.nav.offsetWidth;
            this.height = this.$refs.nav.offsetHeight;
            const containerSize = this.$refs.navScroll.offsetWidth;
            const currentOffset = this.navOffset;
            if (containerSize < navSize) {
                const currentOffset = this.navOffset;
                this.scrollable = this.scrollable || {};
                this.scrollable.prev = currentOffset;
                this.scrollable.next = currentOffset + containerSize < navSize;
                if (navSize - currentOffset < containerSize) {
                    this.navOffset = navSize - containerSize;
                }
            } else {
                this.scrollable = false;
                if (currentOffset > 0) {
                    this.navOffset = 0;
                }
            }
        }
    },

    updated() {
        this.update();
    },

    render() {
        const {
            navStyle,
            scrollable,
            scrollNext,
            scrollPrev,
            height,
            width
        } = this;
        const lineHeight = {
            "line-height": height + "px"
        };
        const scrollBtn = scrollable
            ? [
                  <span
                      class={[
                          "scrollView__nav-prev",
                          scrollable.prev ? "" : "is-disabled"
                      ]}
                      on-click={scrollPrev}
                  >
                      <i style={lineHeight} class="el-icon-arrow-left"></i>
                  </span>,
                  <span
                      class={[
                          "scrollView__nav-next",
                          scrollable.next ? "" : "is-disabled"
                      ]}
                      on-click={scrollNext}
                  >
                      <i style={lineHeight} class="el-icon-arrow-right"></i>
                  </span>
              ]
            : null;

        return (
            <div
                class={[
                    "scrollView__nav-wrap",
                    scrollable ? "is-scrollable" : ""
                ]}
                style={{ width }}
            >
                {scrollBtn}
                <div class="scrollView__nav-scroll" ref="navScroll">
                    <div class="scrollView__nav" ref="nav" style={navStyle}>
                        {this.$slots.default}
                    </div>
                </div>
            </div>
        );
    },

    mounted() {
        addResizeListener(this.$el, this.update);
    },

    beforeDestroy() {
        if (this.$el && this.update) {
            removeResizeListener(this.$el, this.update);
        }
    }
};
</script>

<style lang="scss" scoped>
.scrollView__nav-wrap {
    display: inline-block;
    overflow: hidden;
    margin-bottom: 0;
    position: relative;
    vertical-align: middle;
}

.scrollView__nav-wrap.is-scrollable {
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.scrollView__nav-wrap::after {
    display: none;
}

.scrollView__nav-scroll {
    overflow: hidden;
}

.scrollView__nav {
    white-space: nowrap;
    position: relative;
    transition: transform 0.3s, -webkit-transform 0.3s;
    float: left;
    z-index: 2;
}

.scrollView__nav-prev {
    left: 0;
}
.scrollView__nav-next {
    right: 0;
}
.scrollView__nav-next,
.scrollView__nav-prev {
    position: absolute;
    cursor: pointer;
    line-height: 1;
    font-size: 12px;
    color: #fff;
    &:hover {
        background-color: mix(#fff, $navigation-top-background-color, 10%);
    }
}
</style>